<template>
  <div v-show="isShow" id="x6-menu-wrap" class="x6-menu-wrap">
    <div class="x6-menu">
      <div v-show="type == 'node'" class="x6-menu-item">
        <el-button icon="el-icon-document-copy" @click="copyNode">复制</el-button>
      </div>
      <div class="x6-menu-item">
        <el-button icon="el-icon-delete" @click="deleteCell">删除</el-button>
      </div>
      <div class="x6-menu-item" v-show="type == 'node'">
        <el-button icon="el-icon-caret-right" @click="runCell">运行</el-button>
      </div>
      <!-- <div class="x6-menu-item" v-show="type == 'node'">
        <el-button icon="el-icon-caret-right" @click="runAllCell">运行至所选</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { executeCellIndexCanvas, notebookContent } from '@/api/dag'
import { mapActions } from 'vuex';
import DagGraph from "@/views/dag/dagEdit/graph";
// import { imageData } from '../../fake-image';
let graph = null;
export default {
  name: "ContextMenu",
  data() {
    return {
      type: "blank",
      isShow: false
    };
  },
  mounted() {
    if (DagGraph["graph"]) {
      graph = DagGraph["graph"];
      this.initEvent();
    }
  },
  beforeDestroy() {
    graph = null;
  },
  methods: {
    ...mapActions(['saveCanvas', 'handleStructure']),
    initEvent() {
      graph.on("cell:contextmenu", ({ e, cell }) => {
        let shape = cell.shape;
        if (shape == "start") return;
        this.isShow = true;
        graph.resetSelection(cell);
        const elem = document.querySelector(".x6-menu-wrap");
        elem.style.top = e.clientY + 10 + "px";
        elem.style.left = e.clientX + "px";
        this.type = cell.isNode() ? "node" : "edge";
        // console.log(cell.getData())
      });
      graph.on("blank:click", () => {
        this.isShow = false;
        this.type = "blabk";
      });
    },
    copyNode() {
      const cells = graph.getSelectedCells();
      // console.log(cells.getData())
      console.log(cells.getData)
      if (cells.length) {
        graph.copy(cells);
      }
      graph.paste({ offset: 32 });
      graph.cleanSelection();
      this.cancelShow();
    },
    // 删除边或节点和边
    deleteCell() {
      let cell = graph.getSelectedCells();
      console.log(cell)
      graph.removeCells(cell);
      this.cancelShow();
    },
    async runCell() {
      let [cell] = graph.getSelectedCells();
      let allData = graph.toJSON()
      let [thisData] = allData.cells.filter(e => e.id == cell.id)
      console.log(thisData, "thisData");
      let canvas_id = this.$route.query.canvas_id
      console.log("allData", allData)

      await this.saveCanvas({
        allData, thisData, canvas_id, fn: async () => {

          let argumentData = JSON.parse(sessionStorage.getItem('argumentData'));
          let nContent = await notebookContent(argumentData)
          let component = nContent.data.content.cells.filter(item => item.metadata.component_id === thisData.id)

          console.log("component: ", component);

          let res = await executeCellIndexCanvas({
            ...argumentData,
            // cellIndex: thisData.execution_count,
            cellIndex: component[0].execution_count,
            // component_id: thisData.id,
            // cellIndex: thisData.zIndex,
            sessionId: sessionStorage.getItem('sessionsId')
          })
          console.log(res, "resresresresresres");
          this.isShow = false;
          this.type = "blabk";
          thisData.result = res.data
          this.handleStructure({ thisData })
          // if (thisData.execution_count == 6) {
          //   res.data.display = {
          //     data: imageData
          //   }
          // }
          if (res.data) {
            this.$EventBus.$emit('resSteram', res.data)
          }
        }
      })
    },
    async runAllCell() {
      let [cell] = graph.getSelectedCells();
      let allData = graph.toJSON()
      let [thisData] = allData.cells.filter(e => e.id == cell.id)
      let canvas_id = this.$route.query.canvas_id

      let argumentData = JSON.parse(sessionStorage.getItem('argumentData'))
      let recursion = async (term) => {
        term++
        if (term > thisData.execution_count) return
        let [currentData] = allData.cells.filter(e => e.execution_count == term)
        await this.saveCanvas({ allData, thisData: currentData, canvas_id })
        let res = await executeCellIndexCanvas({
          ...argumentData,
          cellIndex: term,
          sessionId: sessionStorage.getItem('sessionsId')
        })
        currentData.result = res.data
        this.handleStructure({ thisData: currentData })
        if (res.data) {
          this.$EventBus.$emit('resSteram', res.data)
        }
        recursion(term)
      }
      recursion(0)
      // for(let i = 1; i <= thisData.execution_count; i ++) {
      //   let res = await executeCellIndexCanvas({
      //     ...argumentData,
      //     cellIndex: i,
      //     sessionId: sessionStorage.getItem('sessionsId')
      //   })
      //   thisData.result = res.data
      //   this.handleStructure({ thisData })
      //   if (res.data) {
      //     this.$EventBus.$emit('resSteram', res.data)
      //   }
      // }
      this.isShow = false;
      this.type = "blabk";


    },
    cancelShow() {
      this.isShow = false;
    }
  }
};
</script>

<style lang="less" scoped>
.x6-menu-wrap {
  position: absolute;
  z-index: 999;
  border: 1px solid rgba(44, 254, 255, 0);

  .x6-menu {
    position: relative;
    display: inline-block;
    min-width: 82px;
    min-height: 32px;
    margin: 0;
    padding: 4px 0;
    background-color: #183d42;
    outline: 0;
    cursor: pointer;

    .x6-mune-item {
      width: 100%;
      padding: 0 10px;
    }
  }
}

::v-deep .x6-menu {
  .el-button {
    width: 100%;
    border: none;
    text-align: left;
    color: #C0C4CC;
    background-color: #183d42;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>
